<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/layui.css">
    <title>Test</title>
    <style type="text/css">
        .play-now {
            font-size: 20px;
        color: #009688;
        font-weight: bold;
        }
    </style>
</head>
<body>
        <ul class="layui-nav">
            <li class="layui-nav-item layui-col-md-offset8">
                <a href="">奖品细节设置</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">人员设置</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href=""><img src="https://t.cn/RCzsdCq" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">注销</a></dd>
                </dl>
            </li>
        </ul>
        <div id="render">
            <div id="player-div" style="bottom: 0; position: fixed;">
                <div hidden id="playlist-div" style="position: absolute; bottom: 38px; z-index: -1; height: 200px;width: 220px;background: #f2f2f2;box-shadow: 2px -1px 4px #009688;padding: 5px 4px;border: 1px solid #009688;background-color: #fff;border-radius: 4px;">
                    <p style="font-size: 20px;font-weight: bold;padding-left: 11px;">播放列表</p>
                    <hr class="layui-bg-green" style="margin: 5px;">
                    <div id="player-list" style="margin-left: 11px;">
                    </div>
                </div>
                <div class="layui-btn-group">
                    <button class="layui-btn" id="pre-audio"><i class="layui-icon layui-icon-left"></i></button>
                    <button class="layui-btn" id="audio-play-but"><i class="layui-icon layui-icon-play"></i></button>
                    <button class="layui-btn" id="audio-pause-but"><i class="layui-icon layui-icon-pause"></i></button>
                    <button class="layui-btn" id="next-audio"><i class="layui-icon layui-icon-right"></i></button>
                    <button class="layui-btn" id="playlist-but"><i class="layui-icon layui-icon-spread-left"></i></button>
                </div>
                
                <div id="audio-div">

                </div>
            </div>
        </div>


<script src="js/jquery.js"></script>
<script src="js/layui.js"></script>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
    var element = layui.element;
});

$(function(){

    // load audio player model
    {
        //读取播放列表
        // var TEST_PLAY_LIST = [{name:'ff.mp3', path:'music/ff.mp3'}, {name:'04. 공드리 (Feat. 김예림).mp3', path:'music/04. 공드리 (Feat. 김예림).mp3'}];
        // var playList = TEST_PLAY_LIST;
        var playList = JSON.parse(localStorage.getItem('playlist'));
        var playBut = $('#audio-play-but');
        var pauseBut = $('#audio-pause-but');
        var isPlaylistShow = false;

        playList && $('#player-list').html(`${playList.map(e => `<p><a href="#">${e.name}</a></p>`).join('')}`);

        $('#player-list a').click(function(){
            loadAndPlay(getPlayingAudioIdx($(this).text()));
        });

        //initial
        pauseBut.hide();

        playBut.click(function(){
            if ($('#audio')[0] === undefined){
                loadAndPlay(0);
            } else {
                playAudio();
            }
        });

        pauseBut.click(function(){
            pauseAudio();
        });

        $('#next-audio').click(function(){
            nextAudio();
        });

        $('#pre-audio').click(function(){
            preAudio();
        });

        $('#playlist-but').click(function(){
            if (isPlaylistShow) {
                $('#playlist-div').hide();
            } else {
                $('#playlist-div').show();
                $('#playlist-div').addClass('layui-anim layui-anim-up');
            }
            isPlaylistShow = !isPlaylistShow;
        });

        function loadAndPlay(idx) {
            if (playList && playList.length > 0) {
                $('.play-now').each((idx, e) => e.classList.remove('play-now'));
                $(`#player-list a:eq(${idx})`).addClass('play-now');
                $('#audio-div').html($(`<audio id="audio" src="${playList[idx].path}"></audio>`));
                playAudio();
            }
        }

        function getPlayingAudioIdx(audioName) {
            for (var i = 0; i < playList.length; i++) {
                if (playList[i].name === audioName) {
                    return i;
                }
            }
            return -1;
        }

        function setPlayingAduioInPlaylist(name) {
            var playIdx = getPlayingAudioIdx(name);
            if (playIdx != -1) {
                // $('.play-now').each((idx, e) => e.classList.remove('play-now'));
                $('.play-now').removeClass('play-now');
                $(`#player-list > p:eq(${playIdx})`).addClass('play-now');
                loadAndPlay(playIdx);
            }
        }

        function playAudio() {
            if (playList.length > 0) {
                playBut.hide();
                pauseBut.show();
                
                $('#audio')[0].load();
                $('#audio')[0].play();
            }
        }

        function pauseAudio() {
            $('#audio')[0].pause();
            pauseBut.hide();
            playBut.show();
        }

        function nextAudio() {
            if (playList ===null || playList.length <= 0) return;

            var playIdx = getPlayingAudioIdx($('.play-now').text());
            if (playIdx != -1) {
                playIdx = (playIdx + 1) % playList.length;
                loadAndPlay(playIdx);
            }
        }

        function preAudio() {
            if (playList ===null || playList.length <= 0) return;
            
            var playIdx = getPlayingAudioIdx($('.play-now').text());
            if (playIdx != -1) {
                playIdx = ((playIdx - 1) + playList.length) % playList.length;
                loadAndPlay(playIdx);
        }
    }
    }   
});



</script>
</body>
</html>